<template>
  <!-- 收入预测 -->
    <div class="revenue-content">
      <van-row style="background: #FFF">
        <van-col span="14">
          <div class="login-name">{{ loginName }}（{{role}} {{ loginId }}）</div>
        </van-col>
        <van-col span="10">
          <date-time ref="dataTimeRefday" @date="handleChange" />
        </van-col>
      </van-row>
      <div class="detail-info">
        <span class="accfee-title">截止到</span>
        <span class="accfee-size">{{ info.DAY_ID  }}</span>
        <span class="accfee-title">日，</span>
        <span class="accfee-size">{{ info.DAY_ID_AFTER  }}</span>
        <span class="accfee-title">月薪酬预测收入为</span>
        <span class="accfee-size">{{ info.SAL }}</span>
        <span class="accfee-title">元,</span>
        <span class="accfee-size">{{ info.DAY_ID_BEFORE  }}</span>
        <span class="accfee-title">月实际薪酬为</span>
        <span class="accfee-size">{{ info.SAL_LM }}<span class="accfee-unit"></span></span>
        <span class="accfee-title">元,环比为</span>
        <span class="accfee-size">{{ info.RATE }}</span>
      </div>
      <div class="detail-info" v-if="this.role === '小CEO'">
        <!-- <div class="info-desc">预测薪酬<span>{{ info.PREDICT_FEE || 0 }}<span class="accfee-unit">元</span></span></div> -->
        <div class="info-desc">小CEO基础绩效<span>{{ info.ACH_BASE_CEO || 0 }}<span class="accfee-unit">元</span></span></div>
        <div class="info-desc">个人增量分享<span>{{ info.SAL_ACH_GRAB || 0 }}<span class="accfee-unit">元</span></span></div>
      </div>
      <div class="detail-info" v-else-if="this.role === '综合营销经理'">
        <div class="info-desc">基础绩效80% <span>{{ info.SAL_ACH_BASE_ZX || 0 }}<span class="accfee-unit">元</span></span></div>
        <div class="info-desc">发展绩效80%<span>{{ info.SAL_ACH_DEV_ZX || 0 }}<span class="accfee-unit">元</span></span></div>
        <div class="info-desc">个人增量分享 <span>{{ info.SAL_ACH_GRAB || 0 }}<span class="accfee-unit">元</span></span></div>
      </div>
      <div class="detail-info" v-else-if="this.role === '智慧家庭工程师'">
        <div class="info-desc">基础维护绩效80% <span>{{ info.SAL_ACH_WH_ZX || 0 }}<span class="accfee-unit">元</span></span></div>
        <div class="info-desc">交付绩效80%<span>{{ info.SAL_ACH_JF_ZX || 0 }}<span class="accfee-unit">元</span></span></div>
        <div class="info-desc">发展奖励80%<span>{{ info.SAL_ACH_DEV_ZX || 0 }}<span class="accfee-unit">元</span></span></div>
        <div class="info-desc">个人增量分享<span>{{ info.SAL_ACH_GRAB || 0 }}<span class="accfee-unit">元</span></span></div>
      </div>
      <div class="detail-info" v-else>
        <div class="info-desc">基础绩效80% <span>{{ info.SAL_ACH_ZC_ZX || 0 }}<span class="accfee-unit">元</span></span></div>
        <div class="info-desc">个人增量分享<span>{{ info.SAL_ACH_GRAB || 0 }}<span class="accfee-unit">元</span></span></div>
      </div>
    
      <reven-line ref="salaryForecastLineRef" />
    </div> 
  </template>
  
  <script>
  import Vue from 'vue'
  import { USER_INFO } from "@/store/mutation-types"
  
  import dateTime from '@/components/common/dateTime.vue'
  import { accountDate } from '@/api/common.js'
  import * as dayjs from "dayjs"
  
  import {salaryForecast,salaryForecastLine } from '@/api/publicline/wise.js'
  import revenLine from '@/views/components/publicline/board/salaryForecastLine.vue'
  
  export default {
    components: { dateTime, revenLine },
    data() {
      return {
        dayId: '',
        info: {},
        loginId: '',
        loginName: '',
        role:'',
      }
    },
    created() {
        this.loginId =  Vue.ls.get(USER_INFO).username 
        this.loginName =  Vue.ls.get(USER_INFO).realname
        this.role=      Vue.ls.get(USER_INFO).appRole.appRole
      },
    mounted() {
      this.getAccountDate()
    },
    methods: {
      // 获取日账期
      async getAccountDate() {
        const res = await accountDate({ PARAMCODE: 'D' })
        const { result, success } = res
        if (success) {
          this.dayId = dayjs(result[0].value).format('YYYY-MM-DD')
          this.$refs.dataTimeRefday.initDateTime(this.dayId)
          this.getTotal()
          this.getLine()
        }
      },
      // 获取改变的账期
      handleChange(val) {
        this.dayId = val
        this.getTotal()
        this.getLine()
      },
      // 获取合计
      async getTotal() {
        const params = {
          // gridId: this.$gridId,
          loginId:this.loginId,
          loginName:this.loginName,
          dayId: dayjs(this.dayId).format('YYYYMMDD')
        }
        const res = await salaryForecast(params)
        const { result, success } = res
        if(success) {
          this.info = result[0] || {}
        }
      },
      // 获取趋势
      async getLine() {
        const params = {
          loginId:this.loginId,
          loginName:this.loginName,
          dayId: dayjs(this.dayId).format('YYYYMMDD')
        }
        const res = await salaryForecastLine(params)
        const { result, success } = res
        if(success) {
          this.info = result[0] || {}
          if(this.info.CALC_TYPE_NAME === '小CEO'){
            this.$refs.salaryForecastLineRef.initLine(
            this.groupData(result, 'DAY_ID'),
            {
              '预测总薪酬':this.groupData(result, 'SAL'),
              '小CEO基础绩效':this.groupData(result, 'ACH_BASE_CEO'),
               '个人增量分享':this.groupData(result, 'SAL_ACH_GRAB')
            }
          )
          }
          else if (this.info.CALC_TYPE_NAME === '综合营销经理'){
            this.$refs.salaryForecastLineRef.initLine(
            this.groupData(result, 'DAY_ID'),
            {
              '预测总薪酬':this.groupData(result, 'SAL'),
              '基础绩效80%':this.groupData(result, 'SAL_ACH_BASE_ZX'),
              '发展绩效80%':this.groupData(result, 'SAL_ACH_DEV_ZX'),
              '个人增量分享':this.groupData(result, 'SAL_ACH_GRAB')
            }
          )
          }else  if (this.info.CALC_TYPE_NAME === '智慧家庭工程师'){
            this.$refs.salaryForecastLineRef.initLine(
            this.groupData(result, 'DAY_ID'),
            {
              '预测总薪酬':this.groupData(result, 'SAL'),
            '基础维护绩效80%':this.groupData(result, 'SAL_ACH_WH_ZX'),
            '交付绩效80%':this.groupData(result, 'SAL_ACH_JF_ZX'),
            '发展奖励80%':this.groupData(result, 'SAL_ACH_DEV_ZX'),
            '个人增量分享': this.groupData(result, 'SAL_ACH_GRAB')
            }
          )
          }
          else {
            this.$refs.salaryForecastLineRef.initLine(
            this.groupData(result, 'DAY_ID'),
            {
              '预测总薪酬':this.groupData(result, 'SAL'),
              '基础绩效80%':this.groupData(result, 'SAL_ACH_ZC_ZX'),
              '个人增量分享':this.groupData(result, 'SAL_ACH_GRAB')}
          )
          }
        
        }
      },
      groupData(data, key) {
        const value = []
        data.map(item => {
          value.push(item[key] >= 0 ? item[key] : 0)
          // if(key == 'SAL') {
          //   value.push(item[key] >= 0 ? item[key] : '')
          // } else {
          //   value.push(item[key])
          // }
          return item
        })
        return value
      },
    }
  }
  </script>
  <style lang="less" scoped>
  @import '~@/assets/less/person.less';
  .login-name {
    padding: 12px 16px;
  }
  .detail-info {
    margin-top: 16px;
    padding: 16px;
    flex-wrap: wrap;
    .info-desc {
      background-image: url('~@/assets/imgs/publicline/board/bg-card-fz.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      text-align: center;
      width: 50%;
      padding: 16px 0;
      display: flex;
      flex-direction: column;
      > span {
        padding-top: 8px;
        font-size: 16px;
        color: #4D98FF;
      }
    }
    .accfee-title,
    .accfee-unit {
      font-size: 12px;
      color: #666;
    }
    .accfee-size {
      padding: 0 2px;
      font-size: 16px;
      color: #4D98FF;
      font-weight: bold;
    }
    .accfee-unit {
      padding-left: 2px;
    }
  }
  .revenue-content {
    .charts {
      background: #fff;
      padding-top: 8px;
    }
  }
  </style>
  